import React, { useState, memo, useCallback, useMemo } from "react";

// class Child extends React.PureComponent {
//   render() {
//     console.log("child render");
//     return <div>child子组件</div>;
//   }
// }

// class App extends React.Component {
//   state = {
//     count: 10,
//   };
//   obj = { color: "red" };
//   fn = () => {
//     this.setState((prevState) => {
//       return {
//         count: prevState.count + 1,
//       };
//     });
//   };
//   abc = () => {
//     console.log("abc");
//   };
//   render() {
//     return (
//       <>
//         <h2>useCallback</h2>
//         <div>count: {this.state.count}</div>
//         <button onClick={this.fn}>btn</button>
//         <Child style={this.obj} onAbc={this.abc}></Child>
//       </>
//     );
//   }
// }

//! memo是react提供的高阶组件，相当于就是类组件的PureComponent
const Child = memo(() => {
  console.log("child render");
  return <div>child子组件</div>;
});

const obj = { color: "red" };
const App = () => {
  const [count, setCount] = useState(10);
  const [name] = useState(10);
  const add = () => {
    setCount((v) => v + 1);
  };
  //! useCallback传入两个参数，函数以及依赖数组
  //! 返回的就是函数本身
  //! useCallback是用来做函数缓存的
  //! 当一个函数要作为自定义事件往子组件传递的时候，就应该要考虑使用useCallback
  const fn = useCallback(() => {
    console.log(name);
  }, [name]);

  // const fn = useMemo(() => {
  //   return () => {
  //     console.log(name);
  //   };
  // }, [name]);
  return (
    <>
      <h2>useCallback</h2>
      <div>count: {count}</div>
      <button onClick={add}>btn</button>
      <Child style={obj} onAbc={fn} />
    </>
  );
};

export default App;
